<template>
	<view class="container">
		<view class="content">
			<view class="lock_info">
				<view class="lock_detail">
					<view class="lock_mac">Mac地址:{{mac}}</view>
					<view class="lock_type">型号:{{lockType}}</view>
				</view>
				<view class="show_detail" @click="goBleDetail()">
					查看详情
				</view>
			</view>
			<view class="buttons">
				<!-- <button type="primary" @click="openLock()">开 锁</button> -->
				<button type="primary" :disabled="disUpBtn" @click="startUpgrade()">升 级</button>
			</view>
		</view>

		<uni-popup ref="popup" background-color="#fff">
			<view class="popup_content">
				<view class="popup_title">选择版本</view>
				<view class="lock_list">
					<view class="lock_type_num">2.03</view>
					<view class="lock_type_num">2.04</view>
					<view class="lock_type_num">2.05</view>
					<view class="lock_type_num">2.06</view>
					<view class="lock_type_num">2.07</view>
				</view>
				<view class="buttons">
					<view @click="cancel()">取 消</view>
					<view @click="confirm()">确 认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		sendOpenRec,
		getOpenLockCmd,
		getUpgradeLockInfo,
		upgradeCallback
	} from '@/api/lock.js'
	import util from '@/utils/util.js';
	import Upgrage from '@/utils/BleUpgrade.js';
	export default {
		data() {
			return {
				bleUpgrade: null,
				lockNo: '',
				lockType: '',
				lockVersion: '',
				downLoadPackUrl: '',
				mac: '',
				formatMac: '',
				replyMsg: '',
				cmdLen: 0, // 开锁命令的字节长度
				recordId: '', // 开锁的记录ID
				disUpBtn: true, // 升级按钮是否不可用
			}
		},
		onLoad(option) {
			this.lockNo = option.lockNo;
			// console.log('lockNo----->' + this.lockNo);
			this.getLockInfo();
		},
		methods: {
			async getLockInfo() {
				try {
					const resp = await getUpgradeLockInfo({
						lockNo: this.lockNo,
						userName: this.$userInfo.name || '',
						mobile: this.$userInfo.mobile || ''
					})
					if (resp && resp.statecode == '0' && resp.data) {
						this.lockType = resp.data.lockType;
						this.lockVersion = resp.data.lockVersion;
						this.downLoadPackUrl = resp.data.upgradeLinkUrl;
						this.mac = resp.data.mac;
						this.formatMac = util.strInsert(resp.data.mac, 2);
						this.disUpBtn = false;
					} else {
						util.toast('获取锁信息失败!');
					}
				} catch (err) {
					console.log('getUpgradeLockInfo err--->', err);
					util.toast('获取锁信息失败!');
				}
			},
			startUpgrade() {
				try {
					this.disUpBtn = true;
					this.bleUpgrade = new Upgrage({
						downLoadPackUrl: this.downLoadPackUrl,
						lockNo: this.lockNo,
						mobile: this.$userInfo.mobile,
						mac: this.mac,
						progressFunc: this.upProgressFunc,
						successFunc: this.upSuccessFunc,
						errFunc: this.errFunc
					})
					this.bleUpgrade.startUpgrade();
				} catch (e) {
					this.disUpBtn = false;
					this.bleUpgrade.disConnAndCloseBluetooth();
					util.toast(e, 'error');
				}
			},
			// 升级进度函数
			upProgressFunc(msg) {
				util.loading(msg)
			},
			errFunc(msg) {
				try {
					util.hideLoading();
					this.disUpBtn = false;
					this.bleUpgrade.disConnAndCloseBluetooth();
					util.toast(msg, 'error');
				} catch (e) {
					util.hideLoading();
					console.log('errFunc err', e)
				}
			},
			// 升级成功函数
			async upSuccessFunc() {
				// console.log('upSuccessFunc this', this)
				try {
					const resp = await upgradeCallback({
						lockNo: this.lockNo,
						userName: this.$userInfo.name || '',
						mobile: this.$userInfo.mobile || '',
						lockVersion: this.lockVersion
					})
					util.hideLoading();
					if (resp && resp.statecode == '0') {
						util.toast('升级成功', 'success');
					} else {
						util.toast('记录上传失败', 'error');
					}
				} catch (e) {
					util.hideLoading();
					util.toast('记录上传失败', 'error');
					console.log('upSuccessFunc err', e)
				} finally {
					this.disUpBtn = false;
					this.bleUpgrade.disConnAndCloseBluetooth();
				}
			},
			goBleDetail() {
				uni.navigateTo({
					url: '/pages/mine/upgrade/detail?mac=' + this.mac
				})
			}
		}
	}
</script>

<style lang="less">
	.container {
		background-color: white;
		font-size: 32rpx;

		.content {
			padding: 10px;

			.lock_info {
				margin-top: 40px;
				background-color: #f1f1f1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px;
				border-radius: 5px;

				.lock_detail {
					.lock_mac {
						font-size: 16px;
						color: black;
						font-weight: bold;
					}

					.lock_type {
						font-size: 14px;
						color: #b1b1b1;
						margin-top: 20px;
					}
				}

				.show_detail {
					color: blue;
					font-size: 16px;
				}
			}

			.buttons {
				margin-top: 20px;
				display: flex;
				justify-content: space-between;

				:nth-child(1) {
					text-align: center;
					margin-top: 20rpx;
					line-height: 88rpx;
					height: 88rpx;
					border-radius: 10px;
					border: 1px solid gainsboro;
					background-color: #ffffff;
					border-radius: 10px;
					color: black;
					width: 100%;
				}

				:nth-child(2) {
					text-align: center;
					margin-top: 20rpx;
					color: #ffffff;
					line-height: 88rpx;
					height: 88rpx;
					border-radius: 10px;
					border: 1px solid #1D78F7;
					background: linear-gradient(135deg, #4593FF, #1C78F7);
					border-radius: 10px;
					width: 48%;
				}

				button[disabled] {
					background: #D0CBC5 !important;
					border: 1px solid #D0CBC5 !important;
				}
			}
		}

		.popup_content {
			width: 300px;
			border-radius: 100px;
			background-color: #ffffff;

			.popup_title {
				text-align: center;
				font-size: 14px;
				font-weight: 550;
				margin: 10px;
				color: #000;
			}

			.lock_list {
				min-height: 100px;
				max-height: 300px;

				.lock_type_num {
					padding: 10px 0px;
					text-align: center;
					font-size: 12px;
					color: #535353;
				}
			}

			.buttons {
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
				padding: 0px 10px 15px;
				font-size: 14px;

				:nth-child(1) {
					text-align: center;
					margin-top: 10rpx;
					line-height: 60rpx;
					height: 60rpx;
					border: 1px solid gainsboro;
					background-color: #ffffff;
					border-radius: 5px;
					color: black;
					width: 45%;
				}

				:nth-child(2) {
					text-align: center;
					margin-top: 10rpx;
					color: #ffffff;
					line-height: 60rpx;
					height: 60rpx;
					border: 1px solid #1D78F7;
					background: linear-gradient(135deg, #4593FF, #1C78F7);
					border-radius: 5px;
					width: 45%;
				}
			}
		}
	}
</style>